<template>
  <div style="height: 240px; margin: 0 0;">
    <div style="width: 100%;margin-left: 20px; height: 100px;">
        <p style="height: 5px;"></p>
        <p style="width: 78%; margin-left: 10px; color: #1bffff; border-bottom: #1bffff solid 2px; height: 40px; line-height: 40px;">今日景区总人数</p>
        <p style="height: 5px;"></p>
        <div class="li-father">
            <li v-for = "(item,index) in toArr" :key="index">{{ item }}</li>
        </div>
    </div>
    <div style="width: 100%;margin-left: 20px; height: 100px;">
        <p style="height: 1px;"></p>
        <p style="width: 78%; margin-left: 10px; color: #1bffff; border-bottom: #1bffff solid 2px; height: 40px; line-height: 40px;">当前景区人数</p>
        <p style="height: 5px;"></p>
        <div class="li-father">
            <li v-for = "(item,index) in curArr" :key="index">{{ item }}</li>
        </div>
    </div>

  </div>
</template>

<script>
export default {
    props:{
        total:1234,
        cur:111
    },
    data(){
        return{
            to:this.total,
            current:this.cur,
            toArr:[],
            curArr:[],
        }
    },
    mounted(){
        this.splitTo()
        this.splitCur()
       
    },
    created(){
       
    },
    methods:{
        splitTo(){
        
           var String1 = this.to.toString()
           console.log(String1)
           var len1 = String1.length
           var append1 = ""
           for(var i = 0;i<8-len1;i++){
            append1+='0'
           }
           var s1 = append1+String1
           this.toArr = s1.split('')
           console.log(this.toArr,this.to)
        },
        splitCur(){
            var String2 = this.cur.toString()
           var len2 = String2.length
           var append2 = ""
           for(var i = 0;i<8-len2;i++){
            append2+='0'
           }
           var s2 = append2+String2
           this.curArr = s2.split('')
        }
    }
}
</script>

<style scoped lang="less">
@font-face {
    font-family: shuzifont;
    src: url('@/assets/font/DS-DIGIT.TTF');
}

.li-father {
    
    display: flex;
    width: 80%;
    height: 80px;
    justify-content: space-around;
    li {
        flex: 0,1,12%;
        list-style: none;
        font-family: shuzifont;
        color: #1bffff;
        font-size: 40px;
        background-color: #36638d;
        width: 40px;
        height: 44px;
        text-align: center;
        border-radius: 5px;
        margin-left: 5px;
    }
}
</style>
